{% extends 'base.html' %}
{% block content %}
{#    <div class="col-md-2">#}
{#        <ul class="list-group">#}
{#            <li class="list-group-item">查看信息</li>#}
{#            <li class="list-group-item">用户管理</li>#}
{#            <li class="list-group-item">角色管理</li>#}
{#        </ul>#}
{#    </div>#}
    <div class="col-md-8 col-md-offset-2">
        <table class="table table-bordered">
            <div><a href="/add/" class="btn btn-primary">添加人员</a></div>
            <thead>
            <tr>
                <th>序号</th>
                <th>用户id值</th>
                <th>用户名</th>
                <th>手机号</th>
                <th>性别</th>
                <th>用户的角色名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for foo in userinfo %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ foo.id }}</td>
                    <td>{{ foo.username }}</td>
                    <td>{{ foo.phone }}</td>
                    <td>{{ foo.userdetails.sex }}</td>
                    <td>
                        {% for f in foo.roles.all %}
                            {{ f.name }}
                            {% if forloop.last %}
                            {% else %}
                                ,
                            {% endif %}
                        {% endfor %}
                    </td>
                    <td>
                        <a href="/change/{{ foo.id }}" class="btn btn-warning">修改</a>
                        <button class="btn btn-danger " xx="{{ foo.pk }}">删除</button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(".btn-danger").on('click', function () {
            {#var user_id = $(this).attr('xx');#}
            var ths = $(this);
            swal({
                title: "are you sure？",
                text: "开弓没有回头箭!",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "确认删除",
                cancelButtonText: "容我三思",
                closeOnConfirm: false
            }, function () {
                var deleteId = ths.attr('xx');
                $.ajax({
                    type: 'post',
                    url: '/shanchu/',
                    data: {'id': deleteId},
                    success: function (res) {
                        if (res.status === 1) {
                            swal("删除成功!", "该条记录已被删除", "success");
                            ths.parent().parent().remove();
                        } else {
                            swal("删除失败", "删除动作有有误!", "error");
                        }
                    },
                })
            })
        });
    </script>
{% endblock %}